import Taro, { Component } from '@tarojs/taro'
import { View, Text,Picker  } from '@tarojs/components'
import { AtButton } from 'taro-ui'

import '../pages/index/index.scss';

export default class Index extends Component {
  constructor() {
    super(...arguments)
    this.state = {
      consNameArr: ['白羊座', '金牛座', '双子座', '巨蟹座','狮子座','处女座','天秤座','天蝎座','射手座','摩羯座','水瓶座','双鱼座'],
      typeArr:['today','tomorrow','week','month','year'],
      typeArr:[
        {name:'今日',id:'today'},
        {name:'明日',id:'tomorrow'},
        {name:'本周',id:'week'},
        {name:'本月',id:'month'},
        {name:'今年',id:'year'},
      ],
      consName:'白羊座',
      type:{name:'今日',id:'today'},
      isLoading:false,
      data:{}
    }
  }

  onChange = e => {
    this.setState({
      consName: this.state.consNameArr[e.detail.value]
    })
  }

  onTypeChange = e => {
    this.setState({
      type: this.state.typeArr[e.detail.value]
    })
  }

  handleClick(){
    const {consName,type,isLoading}=this.state;
    if(consName && type.id){
      const url = 'http://web.juhe.cn:8080/constellation/getAll';
      const data={
        key:'4b82e25abe9625965940be64343e26e1',
        consName,
        type:type.id,
      }
      Taro.request({url,data}).then(res => this.setState({data:res.data.result}))
    }
  }

  componentDidMount() { }

  render() {
    const {consNameArr,consName,typeArr,type,isLoading,data}=this.state;
    return (
      <View className='star'>
        <View className='page-body'>
          <View className='page-section'>
            <Text className='picker-left'>选择星座</Text>
            <View className='picker-right'>
              <Picker mode='selector' range={consNameArr} onChange={this.onChange}>
                <View className='picker'>
                  当前选择：<Text className='consName'>{consName}</Text>
                </View>
              </Picker>
            </View>
          </View>
          <View className='page-section'>
            <Text className='picker-left'>选择时间</Text>
            <View className='picker-right'>
              <Picker mode='selector' rangeKey='name' range={typeArr} onChange={this.onTypeChange}>
                <View className='picker'>
                  当前选择：<Text className='consName'>{type.name}</Text>
                </View>
              </Picker>
            </View>
          </View>
        </View>
        <View className='star__btn'>
          <AtButton loading={isLoading} type='primary' onClick={this.handleClick.bind(this)}>查询运势</AtButton>
        </View>
      </View>
    )
  }
}

